import { Table, Space, Form, Input, Button, Modal } from "antd";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import AttachUpload from "../component/AttachUpload";


export function AttachPage() {
    let attach = useSelector(state => state.attach)
    // let dispatch = useDispatch()

    let [showUploadModal, setShowUploadModal] = useState(false)
    let [form] = Form.useForm()


    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id'
        },
        {
            title: '文件名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '文件类型',
            dataIndex: 'type',
            key: 'type',
        },
        {
            title: '文件大小',
            key: 'size',
            dataIndex: 'size'
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="small">
                    <a>浏览</a>
                    <a>链接</a>
                </Space>
            ),
        },
    ];


    let openUploadModal = () => {
        setShowUploadModal(true)
    }

    return (
        <div className={"AttachPage"}>
            <Form form={form} style={{ maxWidth: 'none' }} layout="inline">
                <Form.Item label="关键词">
                    <Input placeholder="input placeholder" />
                </Form.Item>

                <Form.Item>
                    <Space>
                        <Button type="primary">搜索</Button>
                        <Button type="default" htmlType="button" onClick={() => openUploadModal()}>上传</Button>
                    </Space>
                </Form.Item>
            </Form>
            <Table size='small' columns={columns} dataSource={attach.records} style={{ marginTop: 10 }}></Table>
            <Modal title="文件上传"
                open={showUploadModal}
                onOk={() => setShowUploadModal(false)}
                onCancel={() => setShowUploadModal(false)}>
                <AttachUpload />
            </Modal>
        </div>
    )


}